<!-- 
  复习vue 样式绑定
  class样式绑定可以选择是否添加该样式
-->
<script setup>
  import { ref } from 'vue';
  const a = ref(false)
</script>

<template>
  <!-- 
    下述代码使用了属性绑定的进阶用法 - 样式绑定
    即是：给class属性绑定值，以达到切换样式的目的 
  -->
  <div :class="{st : a}">
    <p>这是一段文字</p>
  </div>
  <div class="btn">
    <button @click="a = !a">{{ a === false ? "复杂样式" : "基础样式" }}</button>
  </div>
</template>

<style scoped>
  .st {
    color: pink;
    font-size: 45px;
    font-style: italic;
  }
</style>